<template>
  <div class="common-layout">
    <el-container>
      <div class="sides">
        <el-aside width="200px" class="aside">
          <img
            src="../../assets/images/03数据中心_slices/logo03.png"
            class="logo"
          />
          <div class="demo-collapse">
            <el-collapse v-model="activeName" accordion>
              <div class="sy">
                <img
                  src="../../assets/images/03数据中心_slices/icon001.png"
                />首页
              </div>
              <el-collapse-item title="数据中心" name="1">
                <template #title>
                  <img
                    src="../../assets/images/03数据中心_slices/icon002.png"
                    alt=""
                  />
                  <p>数据中心</p>
                </template>
                <div
                  @click="click('/home/datacenter', 1)"
                  :class="{ active: activeIndex == 1 }"
                >
                  实时数据
                </div>
                <div
                  @click="click('/home/customerdata', 2)"
                  :class="{ active: activeIndex == 2 }"
                >
                  客户数据
                </div>
              </el-collapse-item>
              <el-collapse-item title="订单管理" name="2">
                <template #title>
                  <img
                    src="../../assets/images/03数据中心_slices/icon003.png"
                    alt=""
                  />
                  <p>订单管理</p>
                </template>
                <div
                  @click="click('/home/order', 3)"
                  :class="{ active: activeIndex == 3 }"
                >
                  全部订单
                </div>
                <div>待支付订单</div>
                <div>待发货订单</div>
                <div>已发货订单</div>
                <div>已取消订单</div>
              </el-collapse-item>
              <el-collapse-item title="商品管理" name="3">
                <template #title>
                  <img
                    src="../../assets/images/03数据中心_slices/icon004.png"
                    alt=""
                  />
                  <p>商品管理</p>
                </template>
                <div
                  @click="click('/home/goods', 4)"
                  :class="{ active: activeIndex == 4 }"
                >
                  全部商品
                </div>
                <div
                  @click="click('/home/addgoods', 5)"
                  :class="{ active: activeIndex == 5 }"
                >
                  新增商品
                </div>
                <div>婴儿奶瓶</div>
              </el-collapse-item>
              <el-collapse-item title="促销管理" name="4">
                <template #title>
                  <img
                    src="../../assets/images/03数据中心_slices/icon006.png"
                    alt=""
                  />
                  <p>促销管理</p>
                </template>
                <div
                  @click="click('/home/sales', 6)"
                  :class="{ active: activeIndex == 6 }"
                >
                  秒杀管理
                </div>
                <div
                  @click="click('/home/addsales', 7)"
                  :class="{ active: activeIndex == 7 }"
                >
                  新增秒杀
                </div>
                <div
                  @click="click('/home/coupon', 8)"
                  :class="{ active: activeIndex == 8 }"
                >
                  优惠券管理
                </div>
                <div
                  @click="click('/home/addcoupon', 9)"
                  :class="{ active: activeIndex == 9 }"
                >
                  新增优惠券
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-aside>
      </div>
      <el-container>
        <el-header class="header">
          <div class="text" v-for="(item, index) in list" :key="index">
            <router-link :to="{ path: item.path }"
              >{{ item.meta.title }}
              <!-- <span v-if="index < list.length - 1">/ </span> -->
              <!--避免在导航最后出现分割线-->
            </router-link>
          </div>
          <div class="search">
            <el-input
              v-model="input1"
              class="w-50 m-2"
              size="large"
              placeholder="请输入搜索内容"
              :prefix-icon="Search"
            />
          </div>
          <div class="rightbox">
            <img
              src="../../assets/images/03数据中心_slices/icon14.png"
              class="ling"
            />
            <div class="content">
              <span></span>
              <i>八十</i>
            </div>
            <img
              src="../../assets/images/03数据中心_slices/icon15.png"
              class="guanji"
              @click="out"
            />
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { reactive, defineComponent, ref, toRefs, onMounted, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const activeIndex = ref(1);
    const router: any = useRouter();
    const route: any = useRoute();
    const activeName = ref("0");
    const input1 = ref("");
    const state = reactive({
      list: [],
    });
    const click = (url: any, index: any) => {
      router.push(url);
      activeIndex.value = index;
    };
    onMounted(() => {
      let matched = route.matched; //获取菜单对应的路由信息
      state.list = matched;
    });
    watch(
      () => route.matched,
      (newVal, oldVal) => {
        let matched = newVal;
        state.list = matched; //更新路由菜单数组
      }
    );
    // 退出按钮
    const out = () => {
      router.push("/login");
      localStorage.removeItem("token");
    };
    return {
      activeName,
      input1,
      Search,
      click,
      activeIndex,
      ...toRefs(state),
      out,
    };
  },
});
</script>

<style lang="less" scoped>
.common-layout {
  min-width: 1400px;
}
.header {
  min-width: 600px;
  background: #c4de9b;
  height: 80px;
  .text {
    width: 140px;
    font-size: 14px;
    margin-top: 50px;
    float: left;
    margin-left: -55px;
  }
}
.sides {
  background: #c4de9b;
  // height: 100%;/
  .aside {
    background: #95b56d;
    height: 100%;
    border-radius: 0 50px 0 0;
    .logo {
      width: 102px;
      height: 65px;
      margin: 16px 0 0 29px;
    }
  }
}
.main {
  background: #f6f6f6;
  width: calc(100vw - 200px);
  height: calc(100vh - 80px);
}
.el-collapse {
  font-size: 18px;
  font-weight: 900;
  background-color: #95b56d;
  border: none;
  margin-top: 51px;
}
/deep/.el-collapse-item__header {
  font-size: 18px;
  font-weight: 900;
  background-color: #95b56d;
  border: none;
  padding-left: 31px;
  padding-right: 20px;
  img {
    margin-right: 10px;
  }
}
/deep/.el-collapse-item__content {
  background-color: #95b56d;
  border: none;
  font-size: 14px;
  line-height: 40px;
  padding-bottom: 0;
  cursor: pointer;
  div {
    // background-color: #ffdb92;
    padding-left: 74px;
    // border-radius: 0 20px 20px 0;
    // color: #fff;
  }
}
/deep/.el-collapse-item__wrap {
  border: none;
}
/deep/.el-collapse-item {
  font-size: 18px;
  font-weight: 900;
  background-color: #95b56d;
  // padding-right: 20px;
}
.sy {
  cursor: pointer;
  display: flex;
  padding-left: 59px;
  position: relative;
  margin-bottom: 10px;
  img {
    width: 21px;
    height: 19px;
    margin: 0;
    position: absolute;
    top: 0;
    left: 30px;
  }
}
.search {
  width: 180px;
  height: 40px;
  float: left;
  /deep/.el-input {
    margin-left: 130px;
    margin-top: 33px;
    .el-input__wrapper {
      background-color: #f5f5f5;
      border-radius: 10px;
    }
  }
}
.rightbox {
  display: flex;
  float: right;
  margin-top: 20px;
  .ling {
    width: 23px;
    height: 27px;
    margin-top: 11px;
    margin-right: 10px;
  }
  .guanji {
    width: 17px;
    height: 18px;
    margin-top: 16px;
    margin-left: 10px;
  }
  .content {
    display: flex;
    span {
      display: block;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid #000;
    }
    i {
      margin-top: 18px;
      margin-left: 10px;
    }
  }
}
.active {
  background-color: #ffdb92;
  padding-left: 74px;
  border-radius: 0 20px 20px 0;
  color: #fff;
}
</style>
